<template>
	<view class="page_wrapper">
		<view class="menu_list_block">
			<view class="menu_block" style="display: none;">
				<image class="menu_icon" src="@/static/images/kousuan.png"></image>
				<view class="menu_center">
					<view class="menu_title">数的分解与组成</view>
					<view class="study_obj">练习对象: 幼儿园，一年级</view>
					<view class="study_num">学习人数: 3000+</view>
				</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu_block" @tap="mathExamTypes()">
				<image class="menu_icon" src="@/static/images/kousuan.png"></image>
				<view class="menu_center">
					<view class="menu_title">数学口算（智能出题）</view>
					<view class="study_obj">练习对象: 学前班、一、二、三年级</view>
					<view class="study_num">学习人数: 4500+</view>
				</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu_block" @tap="mathCalc(100)">
				<image class="menu_icon" src="@/static/images/kousuan.png"></image>
				<view class="menu_center">
					<view class="menu_title">数学口算（0-100）</view>
					<view class="study_obj">练习对象: 一、二、三年级</view>
					<view class="study_num">学习人数: 5000+</view>
				</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu_block" @tap="mathCalc(1000)">
				<image class="menu_icon" src="@/static/images/kousuan.png"></image>
				<view class="menu_center">
					<view class="menu_title">数学口算（0-1000）</view>
					<view class="study_obj">练习对象: 二、三年级</view>
					<view class="study_num">学习人数: 5000+</view>
				</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu_block" @tap="clockStudy()">
				<image class="menu_icon" src="@/static/images/clock.png"></image>
				<view class="menu_center">
					<view class="menu_title">认识时间</view>
					<view class="study_obj">练习对象: 学前班、一年级</view>
					<view class="study_num">学习人数: 4000+</view>
				</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad(options) {
			
		},
		methods: {
			mathExamTypes() {
				uni.navigateTo({
					url: '/pages/mathExamTypes/mathExamTypes'
				})
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '程序员拼命开发中，敬请期待。'
				// })
			},
			mathCalc(maxNum) {
				if(maxNum === 100) {
					uni.navigateTo({
						url: '/pages/mathExam/mathExam'
					})
				} else if(maxNum === 1000) {
					uni.navigateTo({
						url: '/pages/mathExam/mathExamThousand'
					})
				}
			},
			clockStudy() {
				uni.navigateTo({
					url: '/pages/clockStudy/clockStudy'
				})
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
			}
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/images/myxb.png'
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/images/myxb.png'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.menu_list_block{
			height: 100%;
			padding: 20px;
			display: flex;
			flex-direction: column;
			.menu_block{
				margin-bottom: 20px;
				padding: 15px;
				border: 1px solid #cccccc;
				display: flex;
				.menu_icon{
					width: 70px;
					height: 70px;
				}
				.menu_center{
					flex: 1;
					margin-left: 15px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.menu_title{
						font-size: 17px;
						font-weight: 500;
					}
					.study_obj,.study_num{
						font-size: 14px;
						color: #666666;
					}
				}
				.right_btn{
					width: 20px;
					display: flex;
					justify-content: right;
					align-items: center;
					.menu_icon{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
</style>
